<template>
  <div v-if="infoobj" class="container">
    <!-- 面包屑 -->
    <breaddetail
      :category="infoobj.categories"
      :name="infoobj.name"
    ></breaddetail>
    <!-- 商品基本信息区 -->
    <div class="basic">
      <div class="media">
        <goodsimage :imgarr="infoobj.mainPictures"></goodsimage>
        <goodssales></goodssales>
      </div>
      <div class="spec">
        <GoodName
          :name="infoobj.name"
          :price="skuobj.price||infoobj.price"
          :desc="infoobj.desc"
          :oldprice="skuobj.oldPrice||infoobj.oldPrice"
        ></GoodName>
        <!-- 商品规格 -->
        <goodssku :specs="infoobj.specs" :skus="infoobj.skus" @send="getSkuData"></goodssku>
        <XtxNumbox :number="number" @jiaa="jiaa" @jiann="jiann"></XtxNumbox>
        <XtxButton type="primary" style="margin-top:20px;" :skuobj="skuobj" :number="number" :infoobj="infoobj">
          加入购物车
        </XtxButton>
      </div>
     
    </div> 

    <!-- 商品推荐 -->
    <GoodsRelevant :goodsid="infoobj.id"></GoodsRelevant>
    <!-- 商品详情 -->
    <div class="he2s">
      <goodstab :goods="infoobj" class="stab"></goodstab>
      <div class="goods-aside">
        <GoodsHot :goodsId="infoobj.id" :type="1" class="hot" />
        <GoodsHot :goodsId="infoobj.id" :type="2" class="hot" />
      </div>
    </div>
    <GoodsWarn></GoodsWarn>
  </div>
</template>

<script>
import { getdetail } from "@/utils/Api/NavText";
import breaddetail from "./breaddetail.vue";
import goodsimage from "./goodsimage.vue";
import goodssales from "./goodssales.vue";
import GoodName from "./GoodName.vue";
import GoodsRelevant from "./GoodsRelevant.vue";
import goodstab from "./goodstab.vue";
import GoodsHot from "./GoodsHot.vue";
import GoodsWarn from "./GoodsWarn.vue";
import goodssku from "./goodssku.vue";
import XtxNumbox from "./XtxNumbox.vue";
import XtxButton from "./XtxButton.vue";
export default {
  components: {
    breaddetail,
    goodsimage,
    goodssales,
    GoodName,
    GoodsRelevant,
    goodstab,
    GoodsHot,
    GoodsWarn,
    goodssku,
    XtxNumbox,
    XtxButton
  },
  data() {
    return {
      infoobj: {},
      goodsId: "",
      skuobj:{},
      number:1
    };
  },
  mounted() {
    this.getDetailList(this.$route.query.id);
    this.goodsId = this.$route.query.id;
  },
  methods: {
    async getDetailList(id) {
      let res = await getdetail(id);
      this.infoobj = res.result;
      console.log(this.infoobj);
    },
    // /接受从规格组件传递的数据
    getSkuData(obj){
      console.log(obj);
      this.skuobj=obj
    },  
    jiaa(){
      this.number++
    },
    jiann(){
      if (this.number > 1) {
        this.number--;
      }

    }



  },
};
</script>

<style lang="scss" scoped>
.basic {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding-top: 30px;
}
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    // padding: 30px 30px 30px 0;
    background-color: red;
  }
}

.goods-hot {
  h3 {
    height: 70px;
    background: red;
    color: #fff;
    font-size: 18px;
    line-height: 70px;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: normal;
  }
  ::v-deep .goods-item {
    background: #fff;
    width: 100%;
    margin-bottom: 10px;
    img {
      width: 200px;
      height: 200px;
    }
    p {
      margin: 0 10px;
    }
    &:hover {
      transform: none;
      box-shadow: none;
    }
  }
}
.he2s {
  display: flex;
  // .hot{
  //   display: flex;
  //   flex-direction: column;
  // }
  .goods-aside {
    flex: 1;
  }
  .stab {
    width: 964px;
  }
}
</style>
